<template>
  <div>
    <h1>ref的使用</h1>
    <h1 v-text="num"></h1>
    <button @click="num++">自增</button>
    <button @click="add">自增</button>
    <hr />
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.todo }}</li>
    </ul>
  </div>
</template>

<script setup>
// ref用来定义响应式数据，不只可以定义基本类型，也可以定义复杂类型
// 定义响应式数据，不限类型
// 在 setup 中使用 .value 来访问， 在template中使用不需要.value
import { ref } from "vue";
let num = ref(0);
let list = ref([]);
let add = () => {
  num.value++;
};

setTimeout(() => {
  list.value.push({ id: "001", todo: "学习vue3" });
}, 3000);
</script>

<style lang="scss" scoped>
</style>